<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>品牌管理</el-breadcrumb-item>
      <el-breadcrumb-item>品牌添加</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card>
      <el-form :model="addBrandForm" ref="addFormRef" :rules="addFormRules">
        <el-form-item label="品牌名称:" label-width="120px" prop="brandname">
          <el-input v-model="addBrandForm.brandname"></el-input>
        </el-form-item>
        <el-form-item label="品牌图片:" label-width="120px">
          <el-upload :action="uploadAction" list-type="picture-card" :headers="{authorization: token}" :on-success="uploadSuccessHandle">+</el-upload>
        </el-form-item>
        <el-form-item label="品牌排序:" label-width="120px" prop="brandsort">
          <el-input v-model="addBrandForm.brandsort"></el-input>
        </el-form-item>
      </el-form>
      <el-button type="primary" class="addBtn" @click="addBrand">添加</el-button>
    </el-card>
  </div>
</template>

<script>
import {mapActions} from 'vuex'
export default {
  data(){
    return{
      addBrandForm:{
        brandname:'',
        brandimg: '',
        brandsort: '',
        is_del: 1
      },
      addFormRules:{
        brandname: [{ required: true, message: '请输入品牌名称', trigger: 'blur' }],
        brandsort: [{ required: true, message: '请输入品牌排序', trigger: 'blur' }]

      },
      uploadAction: 'http://localhost:3000/goods/upload',
      token : '' || window.sessionStorage.getItem('token')
    }
  },
  methods:{
    // 图片上传成功回调
    uploadSuccessHandle(res){
      this.addBrandForm.brandimg = res
      
    },
    // vuex映射actions方法
    ...mapActions('brandAbout',['addBrandData']),
    // 添加
    addBrand(){
      this.$refs.addFormRef.validate(valid => {
        if(!this.addBrandForm.brandimg) return this.$message.error('请上传图片！')
        if (valid){
          this.addBrandData(this.addBrandForm)
          this.$refs.addFormRef.resetFields()
          this.$router.push('/brand')
        }
      })
    }
  }
}
</script>

<style scoped>
  .addBtn{
    margin-left: 550px;
  }
</style>